<template>
  <div class='todo-list container'>
    <div class="tabs">
      <ul>
        <li class="is-active"><a>所有({{ allCount }})</a></li>
        <li><a>已完成({{ completedCount }})</a></li>
        <li><a>未完成({{ uncompletedCount }})</a></li>
      </ul>
    </div>

    <!-- columns 表示行的结构 -->
    <!--  column 表示列的结构 -->
    <div class="columns is-multiline is-mobile">
      <div
        class="column is-one-quarter"
        v-for="todo in list"
        :key="todo.id"
      >
        <TodoItem
          :todo="todo"
        />
      </div>
    </div>
  </div>
</template>

<script>
import TodoItem from './TodoItem.vue'

export default {
  name: 'TodoList',
  data() {
    return {}
  },
  props: {
    list: {
      type: Array,
      default() { return [] }
    }
  },
  components: {
    TodoItem
  },
  computed: { // 计算属性
    allCount() {
      return this.list.length
    },
    completedCount() {
      return this.list.filter(todo => todo.completed).length
    },
    uncompletedCount() {
      return this.list.filter(todo => !todo.completed).length
    }
  }
}
</script>

<style lang='scss' scoped>

</style>
